<template>
<!--    <navigator :url="`/pages/exam/index?id=${newsId}`">-->
        <view class="news-card flex bg-white px-[20rpx] py-[32rpx]" @click="gotoDetail">
            <view class="news-isnew" v-if="item.isNew">
                <image src="@/static/images/icon/news-new.png"></image>
            </view>
            <view class="news-card-content flex flex-col justify-between flex-1">
                <view class="news-card-content-title text-base">{{ item.title }}</view>

                <view class="text-muted text-xs w-full flex justify-between mt-[12rpx] news-card-content-ext">
                    <view class='news-desc'>{{ item.desc }}</view>
                    <view class="news-btn flex items-center">
                        <view class="ml-[10rpx]">去练习</view>
                    </view>
                </view>
            </view>
        </view>
<!--    </navigator>-->
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { userInfo, isLogin } = storeToRefs(userStore)

const props = withDefaults(
    defineProps<{
        item: any
        newsId: number
    }>(),
    {
        item: {},
        newsId: ''
    }
)

function gotoDetail(){
    if(isLogin.value) {
        uni.navigateTo({url: `/pages/exam/index?id=${props.newsId}`})
    } else {
        uni.$u.toast('请登录')
    }
}
</script>

<style lang="scss" scoped>
.news-card {
    border-bottom: 1px solid #f8f8f8;
    background-color: #fff;
    width: 92%;
    margin: 20rpx 4% 0;
    border-radius: 30rpx;
    position: relative;

    & > .news-isnew{
        position: absolute;
        top: 0;
        right: 0;
        width: 80rpx;
        z-index: 1000;

        image{
            width: 100%;
            height: 40rpx;
        }
    }

    &-content {
        &-title {
            -webkit-line-clamp: 2;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-indent: 40rpx;
            font-size: 32rpx;
            font-weight: bold;

            background: url('@/static/images/icon/news-icon.png') no-repeat left center;
            background-size: 40rpx 40rpx;
        }
        &-ext{
            background-color: #f5f6fa;
            padding: 20rpx 20rpx;
            border-radius: 10rpx;

            & > .news-desc{
                width: 82%;
                position: relative;

            }

            & > .news-btn{
                color: #148ee3;
                position: relative;
                padding-left: 16rpx;

                &:before{
                    position: absolute;
                    top: 0;
                    left: 0;
                    content: '';
                    width: 1px;
                    height: 100%;
                    background-color: #c8c9ce;
                }
            }

        }
        &-intro {
            -webkit-line-clamp: 1;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
    }
}
</style>
